<template>
  <div>
    <!-- search bar -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input placeholder="可输入订单号/收货人/收货手机号码进行检索" v-model="keywords" clearable @keyup.enter.native="handleSearch"
          @clear="handleSearch"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="info" @click="handleSearchClear">清空</el-button>
      </el-col>
    </el-row>
    <!-- table -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
      :max-height="heightBox - 200">
      <el-table-column align="center" label="序号" width="60">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="订单号" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.order_code }}
        </template>
      </el-table-column>
      <el-table-column label="下单人" align="center" width="130">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
      <el-table-column label="总价" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.totalPrice }}
        </template>
      </el-table-column>
      <el-table-column label="下单日期" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.ent_date | date-format}}
        </template>
      </el-table-column>
      <el-table-column label="商品列表">
        <template #default="{ row }">
          <el-table :data="row.children" border style="width: 100%" class="nested-table">
            <el-table-column prop="goodsName" label="商品名称" min-width="200%">
            </el-table-column>
            <el-table-column prop="goodsPrice" label="单价" align="center">
            </el-table-column>
            <el-table-column prop="quantity" label="数量" align="center">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="收货人" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.clientName }}
        </template>
      </el-table-column>
      <el-table-column label="收货电话" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.clientPhone }}
        </template>
      </el-table-column>
      <el-table-column label="收货地址" width="200">
        <template slot-scope="scope">
          {{ scope.row.city }} {{scope.row.detail}}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === 0 ? 'warning' : scope.row.status === 1 ? 'primary' : scope.row.status === 2 ? 'success' : 'danger'">{{scope.row.statusName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="物流单号" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.send_code || '/'}}
        </template>
      </el-table-column>
      <el-table-column label="发货日期" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.send_date | date-format}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="240">
        <template #default="{row}">
          <el-button type="success" size="mini" icon="el-icon-truck" :disabled="row.status !== 1"
            @click="orderSend(row)">发货</el-button>
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-close" :disabled="row.status !== -1"
            @click="openEditDialog(row)">同意售后</el-button>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination style="float:right;margin:20px 0px;" layout="total, sizes, prev, pager, next, jumper"
      :hide-on-single-page="false" :current-page.sync="pageInfo.currentPage" :total="total"
      :page-sizes="[1, 5, 10, 50, 100, 200, 500, 999]" :page-size="pageInfo.pageSize" background
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
  import {
    getOrderList

  } from "@/api/orders"
  import moment from "moment"
  export default {
    data() {
      return {
        moment: moment,
        keywords: "",
        list: [],
        orderStatus: 99,
        heightBox: 0,
        listLoading: false,
        total: 0,
        pageInfo: {
          currentPage: 1,
          pageSize: 10
        }
      }
    },
    mounted() {
      this.getOrderListData()
      window.addEventListener("resize", this.getCardHeight())
    },
    created() {
      this.$bus.$on("onSaveOrderChange", () => {
        this.getOrderListData()
      })
      this.$bus.$on("onSelectProject", (status) => {
        this.orderStatus = status
        this.keywords = ""
        this.getOrderListData()
      })
    },
    beforeDestroy() {
      this.$bus.$off("onSaveOrderChange");
      this.$bus.$off("onSelectProject");
    },
    destroyed() {
      window.removeEventListener("resize", this.getCardHeight())
    },
    methods: {
      handleSearch() {
        this.getOrderListData()
      },
      handleSearchClear() {
        this.keywords = ""
        this.getOrderListData()
      },
      async getOrderListData() {
        this.listLoading = true;
        try {
          let res = await getOrderList({
            status: this.orderStatus,
            keywords: this.keywords,
            currentPage: this.pageInfo.currentPage,
            pageSize: this.pageInfo.pageSize
          })
          console.log(res)
          this.list = res.data.rows
          this.total = res.data.total
          this.listLoading = false
        } catch (e) {
          //TODO handle the exception
          console.log("error", e)
          this.listLoading = false
        }
      },
      // 分页处理
      handleCurrentChange(currentPage) {
        this.pageInfo.currentPage = currentPage;
        this.getOrderListData()
      },
      handleSizeChange(pageSize) {
        this.pageInfo.pageSize = pageSize;
        this.getOrderListData()
      },

      orderSend(data) {
        this.$bus.$emit('onSendButtonClick', data)
      },
      openEditDialog(){
        this.$message.error('功能暂未开放')
      },

      //获取页面高度
      getCardHeight() {
        this.heightBox = document.body.clientHeight - 50; //- header - breadCrumbs
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-row {
    margin-bottom: 20px;
  }
</style>
